<template>
  <div class="shelf-search-warpper" :class="{'search-top' : ifInputClicked }">
    <div class="shelf-search" :class="{'search-top' : ifInputClicked }">
      <div class="search-wrapper">
        <div class="icon-search-wrapper">
          <span class="icon-search icon"></span>
        </div>
        <div class="search-input-wrapper">
          <input
            class="search-input"
            type="text"
            :placeholder="$t('shelf.search')"
            @input="checkSearchText"
            @click="onSearchClick"
            v-model="searchText"
            ref="searchInput"
          />
        </div>
        <div class="icon-clear-wrapper" @click="clearSearchText">
          <span class="icon-close-circle-fill icon" v-show="searchText.length > 0"></span>
        </div>
      </div>
      <div class="icon-clock-wrapper"
       v-if="!ifInputClicked"
       @click="switchLocale"
       >
        <span class="icon-cn icon" v-if="lang === 'cn'"></span>
        <span class="icon-en icon" v-else></span>
      </div>
      <div class="cancel-btn-wrapper" v-else @click="onCancel">
        <span class="cancel-btn">{{ $t('shelf.cancel') }}</span>
      </div>
    </div>
    <transition name="shelf-tab-slide-up">
    <div class="tab-wrapper" v-if="ifInputClicked" :class="{'search-top' : ifInputClicked }">
        <div class="tab-item" v-for="(item, index) in tabs" :key="index" @click="onTabClick(item)">
          <span class="tab-item-text" :class="{'is-selected': item.selected}">{{item.text}}</span>
        </div>
    </div>
    </transition>
  </div>
</template>

<script>
import { saveLocale } from '../../utils/localStorage'
import { storeShelfMixin } from '../../utils/mixin'
export default {
  mixins: [storeShelfMixin],
  data() {
    return {
      searchText: '',
      ifInputClicked: false
    }
  },
  computed: {
    lang() {
      return this.$i18n.locale
    },
    tabs() {
      return [
        {
          id: 1,
          text: this.$t('shelf.default'),
          selected: true
        },
        {
          id: 2,
          text: this.$t('shelf.progress'),
          selected: false
        },
        {
          id: 3,
          text: this.$t('shelf.purchase'),
          selected: false
        }
      ]
    }
  },
  methods: {
    checkSearchText() {},
    onSearchClick() {
      this.ifInputClicked = true
      // 将shelfTitle隐藏
      this.setShelfTitleVisible(false)
    },
    clearSearchText() {
      this.searchText = ''
    },
    onCancel() {
      this.ifInputClicked = false
      // 将shelfTitle显示
      this.setShelfTitleVisible(true)
    },
    switchLocale() {
      if (this.$i18n.locale === 'cn') {
        this.$i18n.locale = 'en'
      } else {
        this.$i18n.locale = 'cn'
      }
      // 存储到localStorage中
      saveLocale(this.$i18n.locale)
    },
    onTabClick(item) {
      this.tabs.forEach((tab) => {
        if (tab.id === item.id) {
          tab.selected = true
        } else {
          tab.selected = false
        }
      })
      // 强制刷新
      this.$forceUpdate()
    }
  }
}
</script>

<style lang='scss' scopde>
@import '../../assets/style/global.scss';
.shelf-search-warpper {
  position: relative;
  z-index: 130;
  width: 100%;
  height: px2rem(94);
  font-size: px2rem(16);
  background: white;
  // 搜索图标
  .shelf-search {
    display: flex;
    position: absolute;
    top: px2rem(42);
    left: 0;
    z-index: 130;
    width: 100%;
    height: px2rem(52);
    font-size: px2rem(16);
    transition: all $animatinoTime linear;
    background: white;
    &.search-top {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 130;
    }
    .search-wrapper {
        flex: 1;
        display: flex;
        border: 1px solid #ccc;
        margin: px2rem(10);
        padding: px2rem(10);
        border-radius: px2rem(5);
      .icon-search-wrapper {
        flex: 0 0 px2rem(22);
        @include right;
        .icon-search {}
      }
      // 搜索框
      .search-input-wrapper {
          flex: 1;
          padding: 0 px2rem(10);
          box-sizing: border-box;
          @include center;
        .search-input {
            width: 100%;
            border: none;
            font-size: px2rem(14);
            color: #333;
            &:focus {
                outline: none;
            }
            &::-moz-placeholder {
                font-size: px2rem(14);
                color: #ccc;
            }
        }
      }
      .icon-clear-wrapper {
          flex: 0 0 px2rem(24);
          @include left;
        .icon-close-circle-fill {
            font-size: px2rem(14);
        }
      }
    }
    .icon-clock-wrapper {
        flex: 0 0 px2rem(55);
        @include center;
      .icon-cn, .icon-en {
        font-size: px2rem(22);
        color: #666;
      }
    }
    .cancel-btn-wrapper {
        flex: 0 0 px2rem(55);
        @include center;
      .cancel-btn {
        font-size: px2rem(14);
        color: $color-blue;
      }
    }
  }
  .tab-wrapper {
    position: absolute;
    top: px2rem(42);
    width: 100%;
    height: px2rem(50);
    padding: px2rem(0) px2rem(30);
    box-sizing: border-box;
    @include spaceBetween;
    background: white;
      &.search-top {
      position: fixed;
      top: px2rem(42);
    }
    .tab-item {
      .tab-item-text {
        color: #999;
        font-size: px2rem(13);
        &.is-selected {
          color: $color-blue;
        }
      }
    }
  }
}
</style>
